<template>
    <div>
        <ph-divider type="primary">基本展示</ph-divider>
        <ph-color-btn :value="color" @pick="onPick" />
        <ph-divider type="primary">关闭预定义颜色</ph-divider>
        <ph-color-btn :value="color" :preshow="false" @pick="onPick" />
        <ph-divider type="primary">自定义预定义颜色</ph-divider>
        <ph-color-btn
            :value="color"
            :precolors="['#f0f', '#0f0', '#00f']"
            @pick="onPick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { PhDivider } from "@/index";
import { PhColorBtn } from 'ph-colorpicker'
export default defineComponent({
  components: { PhColorBtn, PhDivider },
  setup() {
    const color = ref("#d86161");
    const onPick = (b: string) => {
      color.value = b;
    };
    return { onPick, color };
  },
});
</script>
